#{extends 'main.html' /}
<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a href="javascript:history.go(-1);" class="icon icon-left pull-left"></a>
            <h1 class="title">绑定银行卡</h1>
        </header>
        <section class="bankCard content scroll_y">
            <div class="list-block">
                <form name="form1" method="post" action="">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">入住编号</div>
                                    <div class="item-input">
                                        <select id="contractCode">
                                            #{if contractList.size() == 1}
                                                <option value="${contractList.get(0)?.id}">${contractList.get(0)?.code}</option>
                                            #{/if}
                                            #{else }
                                                <option value="">请选择入住编号</option>
                                                #{list contractList , as :'contract'}
                                                    <option value="${contract?.id}">${contract?.code}</option>
                                                #{/list}
                                            #{/else}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">银行卡号</div>
                                    <div class="item-input">
                                        <input type="text" value="" id="bankCardNumber" placeholder="输入卡号">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">支付密码</div>
                                    <div class="item-input">
                                        <input type="password" value="" placeholder="设置支付密码">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">预留手机</div>
                                    <div class="item-input">
                                        <input type="text" value="" placeholder="输入开户预留手机号">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="content-block">
                        <input type="button" name="button" class="button button-fill button-big button-orange " id="bind_bank_card" value="确认绑定">
                    </div>
                </form>
            </div>
            <script type="text/javascript">


                $(function() {
                    $(document).on('click','#bind_bank_card', function () {
                        $.showPreloader();
                        var contractCode = $('#contractCode').find("option").not(function () {
                            return !this.selected
                        }).text();
                        var bankCardNumber = $('#bankCardNumber').val();
                        if(contractCode == null || contractCode == undefined || contractCode == '') {
                            $.toast("请与服务人员确认您的合同入住编号");
                        }
                        if(bankCardNumber == null || bankCardNumber == undefined || bankCardNumber == '') {
                            $.toast("请输入您的银行卡卡号");
                        }
                        $.getJSON("/bankcard/bind",{bankCardNumber : bankCardNumber,contractCode:contractCode}, function (data) {
                            $.hidePreloader();
                            if(data.success) {
                                window.location.href = '/bankcard/index';
                            } else {
                                $.toast(data.msg);
                            }
                        })
                    })
                })
            </script>
        </section>

        #{include 'weixin/footer.html'/}
    </div>
</div>